<style type="text/css">
.preview {position: relative;}
.preview img {border:1px solid #000;}
.preview .actions {position: absolute; width: 32px; height: 16px;
	background-color: #000000; padding: 5px 8px; border-radius: 5px; top: 50%; left: 50%; margin-top: -13px; margin-left: -24px; opacity: 0; -moz-transition: opacity 0.3s ease-in-out;}
.preview.active .actions, .preview:hover .actions {opacity: 0.8;}
 </style>
<script type="text/template" id="upload_template">
<div name="upload_form" nonce="{nonce}">
	<a href="#upload_button_{nonce}" data-toggle="modal" data-backdrop="static" class="btn btn-success">上传图片...</a>
	<div id="upload_button_{nonce}" class="modal hide">
		<div class="modal-header">
			<button data-dismiss="modal" class="close" type="button">&times;</button>
			<h3>请选择图片</h3>
		</div>
		<div class="modal-body" style="">
			<p>
				<embed src="<{'static/img/avatar_upload/upload.swf'|url}>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" menu="false" scale="noScale" allowFullscreen="true" flashvars="jsfunc=upload_avatar&imgUrl=<{'static/img/avatar_upload/default.jpg'|url}>&pid=75642723&uploadSrc=false&showBrow=true&showCame=false&uploadUrl=<{'attachment/upload_avatar_query?of=json'|url|@rawurlencode}>&pSize=300|280|{width}|{height}&nonce={nonce}" style="width:100%;height:480px"></embed>
			</p>
		</div>
		<div class="modal-footer">
			<!--<a onclick="javascript:var obj = jQuery('embed', '[name=\'upload_form\'][nonce=\'{nonce}\']')[0]; if (obj) obj.jscall_updateAvatar()" href="javascript:" class="btn">上传图片</a>-->
			<a data-dismiss="modal" class="btn btn-danger" href="#">取消</a>
		</div>
	</div>
	<div class="clearfix"></div>
	<div class="hide preview" name="preview_container" style="width:{width}px;height:{height}px;">
		<a href="#" name="preview_link" target="_blank">
			<img src="about:blank" name="preview_img" onload="javascript:resizeImg(this, {width}, {height});" />
		</a>
		<div class="actions">
			<a title="预览" href="#" name="preview_link" target="_blank"><i class="icon-search icon-white glyphicon glyphicon-search" style="color:white;"></i></a>
			<a title="移除" href="#" name="preview_delete"><i class="icon-remove icon-white glyphicon glyphicon-remove" style="color:white;"></i></a>
		</div>
			
	</div>
</div>
</script>
<script type="text/javascript">
function upload_avatar(json, nonce) {
	//console.log(json);alert('');
	jQuery.showtips(json, false);
	if (json.result == 'success' && json.url && json.url !== true) {
		jQuery('input[nonce="'+nonce+'"]').val(json.data.aid).trigger("upload_success");
	}
}
(function($){
$().ready(function(){
	$.fn.extend({
		upload_avatar : function(width, height) {
			return this.each(function(){
				var input = $(this);
				var nonce = rand(10000,99999);
				if ($.isUndefined(width)) width = 160;
				if ($.isUndefined(height)) height = 160;
				var html = $('#upload_template').html().replace(/\{nonce\}/ig, nonce).replace(/\{width\}/ig, width).replace(/\{height\}/ig, height);
				input.after(html);
				input.attr('nonce', nonce);
				var $upload_form = $('[name="upload_form"][nonce="'+nonce+'"]');
				$('[name="preview_container"]', $upload_form).hover(function(){$(this).addClass('active');},function(){$(this).removeClass('active');});

				$('[name="preview_delete"]',  $upload_form).on('click', function(){
					var $upload_form = $(this).parents("[name='upload_form']");
					var nonce = $upload_form.attr('nonce');
					$('input[nonce="'+nonce+'"]').val('0');
					$('[name="preview_container"]', $upload_form).hide();
				});

				input.on('upload_success',function(){
					var input = $(this);
					var nonce = input.attr('nonce');
					var url = "<{'attachment'|url}>?aid=" + parseInt(input.val()); 
					var $upload_form = $('[name="upload_form"][nonce="'+nonce+'"]');
					if (parseInt(input.val()) > 0) {
						$('[name="preview_link"]', $upload_form).attr('href', url);
						$('[name="preview_img"]', $upload_form).attr('src', url);
						$('[name="preview_container"]', $upload_form).show();
					}
					$('#upload_button_' + nonce).modal('hide');
				}).trigger("upload_success");
			});
		}
	});
});
})(jQuery);
</script>